<template>
  <el-container>
    <el-header style="height: auto">
      <div class="flex items-center justify-between py-20 px-40">
        <div class="flex h-full items-center">
          <nuxt-link to="/">
            <img src="/logo.png" class="mr-20px">
          </nuxt-link>
          <form class="search-form" @submit.prevent="handleSearch">
            <el-input
              v-model="searchQuery"
              type="text"
              placeholder="搜索订单"
              style="height: 54px; width: 605px"
              class="rounded-26px bg-#191919"
              @keyup.enter="handleSearch"
            />
          </form>
        </div>
        <div class="flex">
          <div class="flex h-full items-end">
            <img src="/exit-icon.png" alt="" @click="handleLogout">
          </div>
        </div>
      </div>
    </el-header>
    <el-container class="admin-container">
      <el-aside width="250px" class="aside-menu p-40px">
        <el-menu
          background-color="#000000"
          text-color="#595A60"
          :default-active="$route.path"
        >
          <el-menu-item index="/">
            <nuxt-link to="/">
              <div class="flex items-center">
                <img src="/menu-icon-1.png" class="block mr-4px" alt="">
                <span>抢单大厅</span>
              </div>
            </nuxt-link>
          </el-menu-item>
          <el-menu-item index="/finance">
            <nuxt-link to="/finance">
              <div class="flex items-center">
                <img src="/menu-icon-1.png" class="block mr-4px" alt="">
                <span>财务中心</span>
              </div>
            </nuxt-link>
          </el-menu-item>
          <el-menu-item index="/order">
            <nuxt-link to="/order">
              <div class="flex items-center">
                <img src="/menu-icon-2.png" class="block mr-4px" alt="">
                <span>订单管理</span>
              </div>
            </nuxt-link>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main class="bg-#101010 px-40px py-20px">
        <div class="bg-black h-full">
          <nuxt />
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      searchQuery: ''
    }
  },
  methods: {
    handleSearch () {
      this.$store.dispatch('updateSearchQuery', this.searchQuery)
      this.$router.push('/order') 
    },
    handleLogout () {
      this.$confirm('确认退出登录吗？').then(() => {
        this.$auth.logout()
        this.$router.replace('/login')
      })
    }
  }
}
</script>

<style lang="scss">
body {
  background: #000;
  color: #c3c3c3;
}
.admin-container {
  height: calc(100vh - 94px);
  background: #000;
}
.aside-menu {
  box-shadow: 12px 6px 27px 6px #000000;
  .el-menu {
    border-right-color: transparent;
    font-size: 18px;
    .el-menu-item.is-active {
      background-color: #9a9a9a !important;
      // border-radius: ;
    }
  }
}

.search-form .el-input__inner {
  background: #191919;
  border-radius: 26px;
  border-color: transparent;
  height: 100%;
  line-height: 54px;
}
.nuxt-link-exact-active {
  text-decoration: none;
  color: #595a60;
}
.nuxt-link-active,
.el-menu-item a {
  font-size: 18px;
  text-decoration: none;
  color: #595a60;
}
</style>
